
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
</head>
<body>
省份：
<select id="provinceId" >
  <option>---请选择省份---</option>
</select>
城市：
<select id="cityId">
  <option>---请选择城市---</option>
</select>
区县：
<select id="areaId">
  <option>---请选择区县---</option>
</select>

<script src="<%=request.getContextPath()%>/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script>
  $(function() {
    $.post(
            '<%=request.getContextPath()%>/arealink?method=selectProvince',
            function(jsonObj) {
              console.log(jsonObj);
              $(jsonObj).each(function() {
                $('#provinceId').append('<option value="'+this.id+'">'+this.name+'</option>');
              });
            },
            'json'
    );

    // 给省份下拉框绑定change事件
    $('#provinceId').change(function() {
      $('#cityId option:gt(0)').remove();
      var provinceId = $('#provinceId').val();
      $.post(
              '<%=request.getContextPath()%>/arealink?method=selectCity',
              {'provinceId': provinceId},
              function(jsonObj) {
                console.log(jsonObj);
                $(jsonObj).each(function() {
                  $('#cityId').append('<option value="'+this.id+'">'+this.name+'</option>');
                });
              },
              'json'
      );

    });

    //城市下拉框
    $('#cityId').change(function (){
      $('cityId option:gt(0)').remove();
      var cityId =$('#cityId').val();
      $.post(
              '<%=request.getContextPath()%>/arealink?method=selectArea',
              {'cityId': cityId},
              function(jsonObj) {
                console.log(jsonObj);
                $(jsonObj).each(function() {
                  $('#areaId').append('<option value="'+this.id+'">'+this.name+'</option>');
                });
              },
              'json'
      )
    });
  });
</script>

</body>
</html>
